<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入bootstrap的文件-->
		<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
		<link href="//at.alicdn.com/t/font_899810_3dp6wous3af.css" rel="stylesheet" />
	</head>

	<body>
		<i class="iconfont icon-bi-data" style="margin-left: 20px;margin-top: 20px;font-size: 100px;"></i>

		<div class="container">

			<div class="row">
				<div class="col-md-4 col-xs-6" style="background: blue;"> DIV</div>

			</div>

			<div class="row">
				<div style="background: aqua;" class="visible-md"> PC端导航 </div>
				<div style="background:chartreuse; " class="hidden-md"> 手机端导航 </div>
				<code>public static </code>
			</div>
			<div class="row">

				<a class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span>添加</a>

				<span class="glyphicon glyphicon-plus" style="font-size: 60px;color: red;"></span>
			</div>
			<div class="row table-responsive">

				<table class="table table-bordered table-striped table-hover">
					<tr>
						<td>姓名</td>
						<td>性别</td>
						<td>年龄</td>
						<td>姓名</td>
						<td>性别</td>
						<td>年龄</td>
						<td>姓名</td>
						<td>性别</td>
						<td>年龄</td>
						<td>姓名</td>
						<td>性别</td>
						<td>年龄</td>
					</tr>
					<tr>
						<td class="danger">唐僧</td>
						<td>男</td>
						<td>1000</td>
						<td class="danger">唐僧唐僧唐僧唐僧唐僧唐僧唐僧唐僧</td>
						<td>男</td>
						<td>1000</td>
						<td class="danger">唐僧</td>
						<td>男</td>
						<td>1000</td>
						<td class="danger">唐僧</td>
						<td>男</td>
						<td><button class="btn btn-info btn-xs">删除</button> </td>
					</tr>
					<tr>
						<td>孙悟空</td>
						<td>男</td>
						<td>1000</td>
						<td>孙悟空</td>
						<td>男</td>
						<td>1000</td>
						<td>孙悟空</td>
						<td>男</td>
						<td>1000</td>
						<td>孙悟空</td>
						<td>男</td>
						<td>1000</td>
					</tr>
				</table>

			</div>

			<div class="row">
				<img src="img/WechatIMG112.jpeg" class="img-responsive img-circle img-thumbnail" />
			</div>

			<div class="row">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<!-- Wrapper for slides -->
					<div class="carousel-inner" role="listbox">
						<div class="item active">
							<img src="https://img1.360buyimg.com/pop/jfs/t1/10728/39/9301/90447/5c402449Eb2c60528/87e6c361f9dec65f.jpg" alt="...">
							
						</div>
						<div class="item">
							<img src="https://m.360buyimg.com/babel/jfs/t1/16438/1/4852/75691/5c35bcc1E3663f0b6/5b9ca6388fbf3c50.jpg" alt="...">
						</div>
						<div class="item">
							<img src="https://img1.360buyimg.com/pop/jfs/t1/28286/8/5860/67858/5c45701dE4ca7f83b/cd3a8669a6d1e94b.jpg" alt="...">
							<div class="carousel-caption">
								这是一张图片
							</div>
						</div>
					</div>

					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
			</div>
		</div>
	</body>

</html>